<template>
	<view class="team-wrap">
		<u-subsection :list="teamList" :current="1" :height="90"></u-subsection>
		<u-grid :col="2">
			<u-grid-item class="team-item">
				<view class="team-item-title">团队总充值</view>
				<view class="team-item-counts">{{team.teamRecharge||0.00}}</view>
			</u-grid-item>
			<u-grid-item class="team-item">
				<view class="team-item-title">团队总流水</view>
				<view class="team-item-counts">{{team.teamYj||0.00}}</view>
			</u-grid-item>
			<u-grid-item class="team-item">
				<view class="team-item-title">首充人数</view>
				<view class="team-item-counts">{{team.scrs||0}}</view>
			</u-grid-item>
			<u-grid-item class="team-item">
				<view class="team-item-title">团队总人数</view>
				<view class="team-item-counts">{{team.all||0}}</view>
			</u-grid-item>
		</u-grid>
		<!--团队成员-->
		<view class="team-member">
			<view class="h1">团队成员</view>
			<view class="members-list">
				<view class="members-list-item">日期</view>
				<view class="members-list-item">下级</view>
				<view class="members-list-item">任务</view>
			</view>
		</view>
		<u-sticky :offset-top="offsetTop" :enable="enable">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#333333" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		</u-sticky>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tabItem,tabIndex) in userList" :key="tabIndex">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="u-flex uni-center-content user-item" v-for="t in tabItem.list" :key="t.id">
						<view class="avatar">
							<image src="../../static/images/icon/douyin.png" mode="widthFix"></image>
						</view>
						<view class="tel">
							<view class="">{{t.tel}}</view>
							<view class="level">
								<text v-if="t.levels.length==0">普通会员</text>
								<text v-else v-for="l in t.levels" :key="l.id">{{l.name}}</text>
							</view>
						</view>
					</view>
					<view style="margin-top: 30rpx;">
						<u-loadmore :status="tabItem.loadingType" bgColor="#f4f8fb"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				offsetTop: 0,
				enable: true,
				teamList: [
					{
						name: '一级团队'
					},
					{
						name: '二级团队'
					},
					{
						name: '三级团队'
					}
				],
				team:{},
				userList: [
					{
						state: 1,
						loadingType: 'loadmore',
						list: [],
						page:1
					},
					{
						state: 2,
						loadingType: 'loadmore',
						list: [],
						page:1
					},
					{
						state: 3,
						loadingType: 'loadmore',
						list: [],
						page:1
					}
				],
				list: [
					{
						name: ''
					},
					{
						name: ''
					},
					{
						name: ''
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				limit:10
			}
		},
		// onReachBottom(){
		// 	console.log(22)
		// },
		onLoad() {
			this.$request.post("/team/getData", {
				dataType: 'json',
				responseType: 'text'
			})
			.then(res => {
				this.team = res.data.json;
				this.list[0].name = "一级("+res.data.json.one+")";
				this.list[1].name = "二级("+res.data.json.two+")";
				this.list[2].name = "三级("+res.data.json.three+")";
			})
			this.loadMore();
		},
		methods: {
			reachBottom() {
				this.loadMore();
			},
			offsetTopChange(index) {
			},
			enableChange(index) {
				this.enable = index == 0 ? true : false;
			},
			async loadMore(status) {
				//这里是将订单挂载到tab列表下
				let index = this.current;
				let navItem = this.userList[index];
				if(status === 'tabChange' && navItem.loaded === true){
					//tab切换只有第一次需要加载数据
					return;
				}
				if(navItem.loadingType === 'loading'||navItem.loadingType === 'nomore'){
					//防止重复加载
					return;
				}

				navItem.loadingType = 'loading';
				navItem.loaded = true;

				await this.$request.post("/team/getTeamMember", {
					data:{
						status:navItem.state,
						page:navItem.page,
						limit:this.limit
					},
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					if(res.data.json&&res.data.json.length>0){
						navItem.list = navItem.list.concat(res.data.json);
						navItem.page++;
						navItem.loadingType = res.data.json.length>=this.limit?'loadmore':"nomore";
					}else {
						navItem.loaded = true;
						navItem.loadingType = 'nomore';
					}
				})
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.loadMore("tabChange");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// background-color: rgb(242, 242, 242);
	}
	.item{
		padding: 30rpx;
		.title{
			color: #5c5858;
			font-size: 28rpx;
		}
		.number{
			margin-top: 20rpx;
			color: #e76e04;
			font-size: 26rpx;
		}
	}
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: rgb(242, 242, 242);
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	.user-item{
		margin: 0 30rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.avatar{
		width: 80rpx;
		height: 80rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.tel{
		margin-left: 30rpx;
		flex: 1;
	}
	.level{
		color: #a6620b;
		margin-top: 10rpx;
	}

	/*团队样式*/
	.team-wrap{
		margin: 20rpx;
		.team-item{
			&-title{
				color: #908e8f;
				font-size: 30rpx;
				padding-top: 20rpx;
				margin-bottom: 14rpx;
			}
			&-counts{
				color: #f7a126;
				font-weight: bold;
				font-size: 40rpx;
				padding-bottom: 20rpx;
			}
		}
	}
	/*团队成员样式*/
	.team-member{
		padding: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.h1{
			color: #000;
			font-size: 32rpx;
			font-weight: bold;
		}
		.members-list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			background: #f7f5f6;
			border-radius: 12rpx;
			&-item{
				color: #908e8f;
				font-size: 30rpx;
				text-align: center;
				flex: 1;
				line-height: 90rpx;
			}
		}
	}
</style>
